<style lang="less" scoped src="../public.less"></style>
<script src="./studentsignquery.js"></script>

<template>
    <div>
        <Row class="query">
            <Col span="24">
                订单号 ：<Input v-model="queryData.billCode" clearable style="width: 15%"></Input>
                学员姓名  ：<Input v-model="queryData.name" clearable style="width: 10%"></Input>
                身份证号 ：<Input v-model="queryData.cardCode" clearable style="width: 10%"></Input>
                家长手机号 ：<Input v-model="queryData.parentPhone" clearable style="width: 10%"></Input>
            </Col>
        </Row>
        <Row class="query" style="margin-top: 15px;">
            <Col span="24">
                <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
                <span @click="refresh"><Button type="primary" icon="refresh">清空</Button></span>
            </Col>
        </Row>

        <div class="main-table">
            <Table border :columns="columns" :data="dataList"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>

        <Modal v-model="detailsVisible"
               width="100%"
               :mask-closable="false">
            <h2>学员信息</h2>
            <div >
                <Row class="table-Row">
                    <Col span="6" class="titele">姓名：</Col>
                    <Col span="6" class="content">{{student.name}}</Col>
                    <Col span="6" class="titele">性别：</Col>
                    <Col span="6" class="content">{{student.sex}}</Col>
                </Row>
                <Row class="table-Row">
                    <Col span="6" class="titele">身份证号：</Col>
                    <Col span="6" class="content">{{student.cardcode}}</Col>
                    <Col span="6" class="titele">出生日期：</Col>
                    <Col span="6" class="content">{{student.birthdate}}</Col>
                </Row>
                <Row class="table-Row">
                    <Col span="6" class="titele">就读年级：</Col>
                    <Col span="6" class="content">{{student.grade}}</Col>
                    <Col span="6" class="titele">就读学校：</Col>
                    <Col span="6" class="content">{{student.school}}</Col>
                </Row>
                <Row class="table-Row">
                    <Col span="6" class="titele">家长姓名：</Col>
                    <Col span="6" class="content">{{student.parentname}}</Col>
                    <Col span="6" class="titele">家长手机号：</Col>
                    <Col span="6" class="content">{{student.parentphone}}</Col>
                </Row>
                <Row class="table-Row">
                    <Col span="6" class="titele">家庭电话：</Col>
                    <Col span="6" class="content"></Col>
                    <Col span="6" class="titele">学员英文名：</Col>
                    <Col span="6" class="content"></Col>
                </Row>
                <Row class="table-Row">
                    <Col span="6" class="titele">点到卡号：</Col>
                    <Col span="6" class="content"></Col>
                    <Col span="6" class="titele">学生卡号：</Col>
                    <Col span="6" class="content"></Col>
                </Row>
                <Row class="table-Row">
                    <Col span="6" class="titele">家庭地址：</Col>
                    <Col span="6" class="content">{{student.familyaddress}}</Col>
                    <Col span="6" class="titele">备注：</Col>
                    <Col span="6" class="content"></Col>
                </Row>
            </div>
            <div style="margin-top: 15px;">
                <h2 >报名记录</h2>
                <Table border :columns="bill_columns" :data="bill_dataList"></Table>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="detailsVisible=false">取消</Button>
                <Button type="primary" size="large" @click="">确定</Button>
            </div>
        </Modal>

    </div>
</template>
